<template>
  <div class="xinmeiti-container">
    <Header />
    <div class="management-main">
      <div class="left-nav">
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeDept = 'operation'" 
          :class="{ 'active': activeDept === 'operation' }"
        >
          运营部
        </a>
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeDept = 'interview'" 
          :class="{ 'active': activeDept === 'interview' }"
        >
          采访部
        </a>
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeDept = 'photography'" 
          :class="{ 'active': activeDept === 'photography' }"
        >
          摄影部
        </a>
        <a 
          href="#" 
          class="nav-item" 
          @click.prevent="activeDept = 'promotion'" 
          :class="{ 'active': activeDept === 'promotion' }"
        >
          网宣部
        </a>
      </div>
      
      <div class="content-area">
        <!-- 部门子导航 -->
        <div class="sub-nav">
          <button 
            class="sub-nav-item" 
            :class="{ 'active': activeTab === 'intro' }"
            @click="activeTab = 'intro'"
          >
            部门简介管理
          </button>
          <button 
            class="sub-nav-item" 
            :class="{ 'active': activeTab === 'members' }"
            @click="activeTab = 'members'"
          >
            成员管理
          </button>
          <button 
            class="sub-nav-item" 
            :class="{ 'active': activeTab === 'meetings' }"
            @click="activeTab = 'meetings'"
          >
            部门会议
          </button>
          <button 
            class="sub-nav-item" 
            :class="{ 'active': activeTab === 'profile' }"
            @click="activeTab = 'profile'"
          >
            个人中心
          </button>
        </div>
        
        <!-- 部门简介管理 -->
        <div v-if="activeTab === 'intro'" class="module-content">
          <div class="module-header">
            <h3>{{ currentDeptName }}简介管理</h3>
            <button @click="isEditingIntro = true" class="btn-edit">编辑简介</button>
          </div>
          
          <div v-if="!isEditingIntro" class="intro-content">
            <p>{{ deptIntro }}</p>
            <div class="dept-image">
              <img :src="deptImageUrl" alt="{{ currentDeptName }}图片">
            </div>
          </div>
          
          <div v-if="isEditingIntro" class="intro-editor">
            <textarea 
              v-model="deptIntro" 
              rows="6" 
              class="intro-textarea"
              placeholder="请输入部门简介"
            ></textarea>
            <div class="form-group">
              <label>部门图片</label>
              <input type="text" v-model="deptImageUrl" placeholder="图片URL">
            </div>
            <div class="form-actions">
              <button @click="saveIntro" class="btn-primary">保存</button>
              <button @click="isEditingIntro = false" class="btn-cancel">取消</button>
            </div>
          </div>
        </div>
        
        <!-- 成员管理 -->
        <div v-if="activeTab === 'members'" class="module-content">
          <div class="module-header">
            <h3>{{ currentDeptName }}成员管理</h3>
            <button @click="showAddMemberDialog = true" class="btn-primary">添加成员</button>
          </div>
          
          <div class="search-filter">
            <input 
              type="text" 
              v-model="memberSearch" 
              placeholder="搜索成员姓名或学号"
              class="search-input"
            >
          </div>
          
          <table class="data-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>学号</th>
                <th>学院</th>
                <th>职位</th>
                <th>联系方式</th>
                <th>入社时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(member, index) in filteredMembers" :key="member.id">
                <td>{{ index + 1 }}</td>
                <td>{{ member.name }}</td>
                <td>{{ member.studentId }}</td>
                <td>{{ member.college }}</td>
                <td>{{ member.position }}</td>
                <td>{{ member.phone }}</td>
                <td>{{ member.joinDate }}</td>
                <td class="action-buttons">
                  <button @click="handleViewMember(member.id)" class="btn-view">查看</button>
                  <button @click="handleEditMember(member)" class="btn-edit">编辑</button>
                  <button @click="handleDeleteMember(member.id)" class="btn-delete">删除</button>
                </td>
              </tr>
              <tr v-if="filteredMembers.length === 0">
                <td colspan="8" class="no-data">暂无成员数据</td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 部门会议 -->
        <div v-if="activeTab === 'meetings'" class="module-content">
          <div class="module-header">
            <h3>{{ currentDeptName }}部门会议</h3>
            <button @click="showAddMeetingDialog = true" class="btn-primary">添加会议</button>
          </div>
          
          <div class="meeting-list">
            <div v-for="meeting in filteredMeetings" :key="meeting.id" class="meeting-item">
              <h4>{{ meeting.title }}</h4>
              <p class="meeting-meta">日期: {{ meeting.date }} | 主持人: {{ meeting.host }}</p>
              <p class="meeting-content">{{ meeting.content.substring(0, 100) }}...</p>
              <div class="meeting-actions">
                <button @click="handleViewMeeting(meeting)" class="btn-view">查看</button>
                <button @click="handleEditMeeting(meeting)" class="btn-edit">编辑</button>
                <button @click="handleDeleteMeeting(meeting.id)" class="btn-delete">删除</button>
              </div>
            </div>
            <div v-if="filteredMeetings.length === 0" class="no-data">暂无会议记录</div>
          </div>
        </div>
        
        <!-- 个人中心 -->
        <div v-if="activeTab === 'profile'" class="module-content">
          <div class="module-header">
            <h3>个人中心</h3>
          </div>
          
          <div class="profile-form">
            <div class="form-group">
              <label>姓名</label>
              <input type="text" v-model="userInfo.name" :disabled="!isEditingProfile">
            </div>
            <div class="form-group">
              <label>学号</label>
              <input type="text" v-model="userInfo.studentId" disabled>
            </div>
            <div class="form-group">
              <label>学院</label>
              <input type="text" v-model="userInfo.college" :disabled="!isEditingProfile">
            </div>
            <div class="form-group">
              <label>联系方式</label>
              <input type="text" v-model="userInfo.phone" :disabled="!isEditingProfile">
            </div>
            <div class="form-actions">
              <button 
                @click="isEditingProfile = !isEditingProfile" 
                class="btn-secondary"
                v-if="!isEditingProfile"
              >
                编辑信息
              </button>
              <button 
                @click="saveProfile" 
                class="btn-primary"
                v-if="isEditingProfile"
              >
                保存
              </button>
              <button 
                @click="cancelEditProfile" 
                class="btn-cancel"
                v-if="isEditingProfile"
              >
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const authStore = useAuthStore()

// 状态管理
const activeDept = ref('operation') // 运营部、采访部、摄影部、网宣部
const activeTab = ref('intro') // 简介、成员、会议、个人中心
const isEditingIntro = ref(false)
const showAddMemberDialog = ref(false)
const showAddMeetingDialog = ref(false)
const isEditingProfile = ref(false)
const memberSearch = ref('')

// 部门数据
const deptIntro = ref('')
const deptImageUrl = ref('')
const members = ref([])
const meetings = ref([])

// 用户信息
const userInfo = ref({
  name: '',
  studentId: '',
  college: '',
  phone: ''
})

// 部门名称映射
const deptNameMap = {
  operation: '运营部',
  interview: '采访部',
  photography: '摄影部',
  promotion: '网宣部'
}

// 当前部门名称
const currentDeptName = computed(() => deptNameMap[activeDept.value])

// 过滤后的成员列表
const filteredMembers = computed(() => {
  return members.value.filter(member => 
    member.name.includes(memberSearch.value) || 
    member.studentId.includes(memberSearch.value)
  )
})

// 过滤后的会议列表
const filteredMeetings = computed(() => {
  return meetings.value
})

// 初始化数据
onMounted(() => {
  // 检查登录状态
  if (!authStore.isLoggedIn) {
    router.push('/login')
    return
  }
  
  // 加载部门数据
  loadDeptData()
  // 加载用户信息
  loadUserProfile()
})

// 加载部门数据
const loadDeptData = () => {
  // 实际项目中应该从API获取，这里用本地存储模拟
  const savedIntro = localStorage.getItem(`xinmeiti_${activeDept.value}_intro`)
  const savedMembers = localStorage.getItem(`xinmeiti_${activeDept.value}_members`)
  const savedMeetings = localStorage.getItem(`xinmeiti_${activeDept.value}_meetings`)
  
  if (savedIntro) {
    const introData = JSON.parse(savedIntro)
    deptIntro.value = introData.content
    deptImageUrl.value = introData.imageUrl
  } else {
    // 默认简介
    deptIntro.value = `这里是${currentDeptName.value}的简介内容...`
    deptImageUrl.value = ''
  }
  
  members.value = savedMembers ? JSON.parse(savedMembers) : []
  meetings.value = savedMeetings ? JSON.parse(savedMeetings) : []
}

// 加载用户信息
const loadUserProfile = () => {
  const savedProfile = localStorage.getItem('xinmeiti_minister_profile')
  if (savedProfile) {
    userInfo.value = JSON.parse(savedProfile)
  }
}

// 保存部门简介
const saveIntro = () => {
  const introData = {
    content: deptIntro.value,
    imageUrl: deptImageUrl.value
  }
  localStorage.setItem(`xinmeiti_${activeDept.value}_intro`, JSON.stringify(introData))
  isEditingIntro = false
  alert('部门简介保存成功')
}

// 保存个人信息
const saveProfile = () => {
  localStorage.setItem('xinmeiti_minister_profile', JSON.stringify(userInfo.value))
  isEditingProfile.value = false
  alert('个人信息保存成功')
}

// 取消编辑个人信息
const cancelEditProfile = () => {
  loadUserProfile()
  isEditingProfile.value = false
}

// 成员管理方法
const handleViewMember = (id) => {
  router.push(`/buzhang/xinmeitiDetail?id=${id}&dept=${activeDept.value}`)
}

const handleEditMember = (member) => {
  // 编辑成员逻辑
  console.log('编辑成员', member)
}

const handleDeleteMember = (id) => {
  if (confirm('确定要删除该成员吗？')) {
    members.value = members.value.filter(member => member.id !== id)
    localStorage.setItem(`xinmeiti_${activeDept.value}_members`, JSON.stringify(members.value))
  }
}

// 会议管理方法
const handleViewMeeting = (meeting) => {
  console.log('查看会议', meeting)
}

const handleEditMeeting = (meeting) => {
  console.log('编辑会议', meeting)
}

const handleDeleteMeeting = (id) => {
  if (confirm('确定要删除该会议吗？')) {
    meetings.value = meetings.value.filter(meeting => meeting.id !== id)
    localStorage.setItem(`xinmeiti_${activeDept.value}_meetings`, JSON.stringify(meetings.value))
  }
}

// 监听部门切换，重新加载数据
watch(activeDept, () => {
  loadDeptData()
})
</script>

<style scoped>
.xinmeiti-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.management-main {
  display: flex;
  flex: 1;
  padding: 20px;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.left-nav {
  width: 200px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-item {
  display: block;
  padding: 12px 20px;
  color: #333;
  text-decoration: none;
  transition: all 0.3s;
}

.nav-item:hover {
  background-color: #f0f7ff;
  color: #3498db;
}

.nav-item.active {
  background-color: #3498db;
  color: white;
}

.content-area {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sub-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.sub-nav-item {
  padding: 8px 16px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.sub-nav-item:hover {
  background-color: #f5f5f5;
}

.sub-nav-item.active {
  background-color: #3498db;
  color: white;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.btn-primary {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-edit {
  background-color: #52c41a;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-cancel {
  background-color: #f5f5f5;
  color: #333;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #f0f0f0;
  color: #333;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.search-filter {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th, .data-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.data-table th {
  background-color: #f5f7fa;
}

.action-buttons {
  display: flex;
  gap: 5px;
}

.btn-view {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.intro-content {
  line-height: 1.6;
  color: #333;
}

.intro-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.meeting-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.meeting-meta {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.meeting-content {
  color: #333;
  margin-bottom: 15px;
}

.meeting-actions {
  display: flex;
  gap: 10px;
}

.no-data {
  text-align: center;
  padding: 30px;
  color: #999;
}

.profile-form {
  max-width: 500px;
}
</style>